<template>
  <el-container style="height: 100%">
    <el-container style="height: 95%;">
<!--      <el-aside width="10%" style="margin-top: 20px">-->
<!--        <el-scrollbar height="100%">-->
<!--          <el-space direction="vertical">-->
<!--            <el-card v-for="i in 5" :key="i" class="box-card" >-->
<!--              <span>someone</span>-->
<!--            </el-card>-->
<!--          </el-space>-->
<!--        </el-scrollbar>-->
<!--      </el-aside>-->
      <el-main style="width: 85%; height: 100%">
        <el-scrollbar style="height: 98%; overflow: auto">
          <el-card style="height: 98%;overflow: auto">

            <div style="overflow: auto">
              <!--              { "noticeid": 1, "status": "1", "createtime": "2022-02-21T14:24:31.000+00:00", "userid": 1, "sendtype": "system", "touserid": 1, "bodytype": "hearten", "body": "xxx点赞了你的作品" }-->
              <p v-for="notice in notices" class="scrollbar-message-item">
                {{ notice.createtime }}<br/>
                <!--                {{notice.bodytype}}<br/>-->
                {{notice.body}}
              </p>
            </div>
          </el-card>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {getToken} from "@/utils/auth";
import router from "@/router";
import request from "@/utils/request";
import {getUserInfo} from "@/utils/owninfo";
import Moment from 'moment'

export default {
  name: "Notice",
  data() {
    return {
      notices:'',
    }
  },
  created() {
    this.validateLogin();
  },
  methods: {
    load(){
      request({
        url: '/notice/getnoticesbyuserid',
        method: 'get',
        params:{
          userid: getUserInfo(),
        }
      }).then(response => {
        console.log(response)
        this.notices = response.data.notices;
        for(var i = 0; i < this.notices.length; i++){
          this.notices[i].createtime = Moment(this.notices[i].createtime).format('YYYY-MM-DD HH:mm:ss')
        }
      }).catch(error => {
        console.info(error)
        this.$message.error("请重新登录")
      })
    },
    validateLogin() {
      console.info("验证登录")
      // console.info(getToken())
      if(getToken() === null || getToken() === undefined || getToken() === "undefined"){
        console.info('去登陆')
        router.push("/login");
        return ;
      }
      this.load();
    }
  },
}
</script>

<style scoped>
.scrollbar-message-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
</style>
